---
title: Zen Mode
icon: Fullscreen
---

<MetaData
  lang="en-US"
  meta={{
    plugins: [{
      client: '@univerjs/sheets-zen-editor',
      facade: '@univerjs/sheets-zen-editor/facade',
      locale: '@univerjs/sheets-zen-editor/locale/en-US',
      style: '@univerjs/sheets-zen-editor/lib/index.css',
    }],
    server: 'No',
  }}
/>

Zen Mode allows users to focus on editing cell content in a clean interface. It provides a full-screen editor for editing the content of the currently active cell, enhancing the editing experience by minimizing distractions.

## Preset Mode

Zen Mode does not provide a preset mode but supports mixing with its plugin.

### Installation

```package-install
npm install @univerjs/sheets-zen-editor
```

### Usage

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor'
import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US' // [!code ++]

import '@univerjs/sheets-zen-editor/facade' // [!code ++]

import '@univerjs/sheets-zen-editor/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      SheetsZenEditorEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsZenEditorPlugin, // [!code ++]
  ],
})
```

## Plugin Mode

### Installation

```package-install
npm install @univerjs/sheets-zen-editor
```

### Usage

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor' // [!code ++]
import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US' // [!code ++]

import '@univerjs/sheets-zen-editor/lib/index.css' // [!code ++]

import '@univerjs/sheets-zen-editor/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsZenEditorEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsZenEditorPlugin) // [!code ++]
```

## Facade API

Complete Facade API type definitions can be found in the [FacadeAPI](https://reference.univer.ai/en-US).

### Entering Zen Editing Mode

`FWorkbook.startZenEditingAsync()` can be used to enter Zen editing mode, which opens a full-screen editor for editing the content of the currently active cell.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.startZenEditingAsync()
```

### Exiting Zen Editing Mode

`FWorkbook.endZenEditingAsync(save)` can be used to exit Zen editing mode, closing the full-screen editor. If `save` is `true`, it saves the changes made in the editor.

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.endZenEditingAsync(true)
```

### Event Listeners

Zen editor can use the [cell edit events](http://localhost:3000/en-US/guides/sheets/features/core/range-selection#%E5%BC%80%E5%A7%8B%E7%BC%96%E8%BE%91%E4%BA%8B%E4%BB%B6) to listen for changes in the editor:

- `univerAPI.Event.BeforeSheetEditStart`: Before entering Zen editing mode
- `univerAPI.Event.SheetEditStarted`: After entering Zen editing mode
- `univerAPI.Event.BeforeSheetEditEnd`: Before exiting Zen editing mode
- `univerAPI.Event.SheetEditEnded`: After exiting Zen editing mode
